import React, { useState, useEffect } from 'react'
import { Switch, Route } from 'react-router-dom'
import { Provider } from '../../utils/context'
import { permissionRoutes } from '../../routes'
import { selectClassAsync } from '../../api/class'
import { selectStudentAsync } from '../../api/student'
import { selectExamAsync } from '../../api/exam'
import { selectScoreAsync } from '../../api/score'
import { DownOutlined } from '@ant-design/icons'

import { Button, Menu, Dropdown, Spin } from 'antd'

function Analyse() {
    const [classData, setClassData] = useState([])
    const [studentData, setStudentData] = useState([])
    const [examData, setExamData] = useState([])
    const [scoreData, setScoreData] = useState([])
    const [baseValue, setBaseValue] = useState({})
    const [pageLoading, setPageLoading] = useState(true)
    const [choiceExamInfo, setChoiceExamInfo] = useState({})
    const [scoreDataExam, setScoreDataExam] = useState([])
    // 异步请求函数抽象
    const asyncRequest = async (fn, payload = []) => {
        const res = await fn(...payload)
        if (res.code === 0) {
            return res.data ? res.data : true
        }
    }
    useEffect(() => {
        async function asyncFn() {
            setPageLoading(true)
            setClassData(await asyncRequest(selectClassAsync))
            setStudentData(await asyncRequest(selectStudentAsync))
            setExamData(await asyncRequest(selectExamAsync))
            setScoreData(await asyncRequest(selectScoreAsync))
            setPageLoading(false)
            // console.log('0')
        }
        asyncFn()
    }, [])
    useEffect(() => {
        if (!pageLoading) {
            setBaseValue({
                classData,
                studentData,
                examData,
                scoreData
            })
            // console.log(classData)
            // console.log(studentData)
            // console.log(examData)
            // console.log(scoreData)
            // console.log('1')
        }
    }, [classData, examData, pageLoading, scoreData, studentData])
    const menu = (
        <Menu
            onClick={(e) => {
                choiceExamButtonEvent(e)
            }}
        >
            {examData.length ? (
                examData.map((item) => {
                    return <Menu.Item key={item.no}>{item.name}</Menu.Item>
                })
            ) : (
                <span>暂无考试</span>
            )}
        </Menu>
    )
    // 选择考试名称按钮事件
    const choiceExamButtonEvent = (e) => {
        // console.log(e)
        setChoiceExamInfo({
            no: e.key,
            name: examData.filter((item) => +item.no === +e.key)[0].name
        })
        setScoreDataExam(
            scoreData.filter((item) => +item.examNo === +e.key)[0].list
        )
    }
    return (
        <>
            <Provider
                value={{
                    classData,
                    examData,
                    studentData,
                    scoreData,
                    baseValue,
                    choiceExamInfo,
                    scoreDataExam
                }}
            >
                {pageLoading ? (
                    <Spin />
                ) : (
                    <div>
                        <span>请选择考试名称：</span>
                        <Dropdown overlay={menu}>
                            <Button type="primary">
                                {choiceExamInfo.name
                                    ? choiceExamInfo.name
                                    : '考试列表'}
                                <DownOutlined />
                            </Button>
                        </Dropdown>
                    </div>
                )}
                <Switch>
                    {permissionRoutes
                        .filter((route) => route.path === '/admin/analyse')[0]
                        .children.map((child) => (
                            <Route
                                path={child.path}
                                key={child.path}
                                component={child.component}
                            />
                        ))}
                </Switch>
            </Provider>
        </>
    )
}

export default Analyse
